<template>
  <div class="top">
    <mt-navbar v-model="selected2" :fixed="true" style="display:flex" @click.native="select">
      <mt-tab-item id="1">热点</mt-tab-item>
      <mt-tab-item id="2">新闻</mt-tab-item>
      <mt-tab-item id="3">娱乐</mt-tab-item>
      <mt-tab-item id="4">体育</mt-tab-item>
      <mt-tab-item id="5">财经</mt-tab-item>
      <mt-tab-item id="6">科技</mt-tab-item>
    </mt-navbar>

    <mt-tab-container v-model="selected2" style="margin-top: 50px">
      <mt-tab-container-item id="1">
        <div class="content-item" v-for="item in news1" :key="item.id" v-model="selected">
          <div class="article-preview" @click="getArticle(item.id)">
            <div class="article-preview-content">
              <div class="article-preview-title">{{ item.title.length < 28 ? item.title : item.title.substring(0, 28).concat('...') }}</div>
              <div class="article-preview-info">
                <div class="article-preview-info-left">
                  <span class="article-preview-repost">{{ item.redirect == null ? 0 : item.redirect }}转发,{{ item.readCount == null ? 0 : item.readCount }}阅读</span>
                </div>
                <div class="article-preview-info-right">
                  <div class="">
                    <span class="taro-text theme-tag">#{{ item.type }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="content-item" v-for="item in news2" :key="item.id" v-model="selected">
          <div class="article-preview" @click="getArticle(item.id)">
            <div class="article-preview-content">
              <div class="article-preview-title">{{ item.title.length < 28 ? item.title : item.title.substring(0, 28).concat('...') }}</div>
              <div class="article-preview-info">
                <div class="article-preview-info-left">
                  <span class="article-preview-repost">{{ item.redirect == null ? 0 : item.redirect }}转发,{{ item.readCount == null ? 0 : item.readCount }}阅读</span>
                </div>
                <div class="article-preview-info-right">
                  <div class="">
                    <span class="taro-text theme-tag">#{{ item.type }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div class="content-item" v-for="item in news3" :key="item.id" v-model="selected">
          <div class="article-preview" @click="getArticle(item.id)">
            <div class="article-preview-content">
              <div class="article-preview-title">{{ item.title.length < 28 ? item.title : item.title.substring(0, 28).concat('...') }}</div>
              <div class="article-preview-info">
                <div class="article-preview-info-left">
                  <span class="article-preview-repost">{{ item.redirect == null ? 0 : item.redirect }}转发,{{ item.readCount == null ? 0 : item.readCount }}阅读</span>
                </div>
                <div class="article-preview-info-right">
                  <div class="">
                    <span class="taro-text theme-tag">#{{ item.type }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
        <div class="content-item" v-for="item in news4" :key="item.id" v-model="selected">
          <div class="article-preview" @click="getArticle(item.id)">
            <div class="article-preview-content">
              <div class="article-preview-title">{{ item.title.length < 28 ? item.title : item.title.substring(0, 28).concat('...') }}</div>
              <div class="article-preview-info">
                <div class="article-preview-info-left">
                  <span class="article-preview-repost">{{ item.redirect == null ? 0 : item.redirect }}转发,{{ item.readCount == null ? 0 : item.readCount }}阅读</span>
                </div>
                <div class="article-preview-info-right">
                  <div class="">
                    <span class="taro-text theme-tag">#{{ item.type }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="5">
        <div class="content-item" v-for="item in news5" :key="item.id" v-model="selected">
          <div class="article-preview" @click="getArticle(item.id)">
            <div class="article-preview-content">
              <div class="article-preview-title">{{ item.title.length < 28 ? item.title : item.title.substring(0, 28).concat('...') }}</div>
              <div class="article-preview-info">
                <div class="article-preview-info-left">
                  <span class="article-preview-repost">{{ item.redirect == null ? 0 : item.redirect }}转发,{{ item.readCount == null ? 0 : item.readCount }}阅读</span>
                </div>
                <div class="article-preview-info-right">
                  <div class="">
                    <span class="taro-text theme-tag">#{{ item.type }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="6">
        <div class="content-item" v-for="item in news6" :key="item.id" v-model="selected">
          <div class="article-preview" @click="getArticle(item.id)">
            <div class="article-preview-content">
              <div class="article-preview-title">{{ item.title.length < 28 ? item.title : item.title.substring(0, 28).concat('...') }}</div>
              <div class="article-preview-info">
                <div class="article-preview-info-left">
                  <span class="article-preview-repost">{{ item.redirect == null ? 0 : item.redirect }}转发,{{ item.readCount == null ? 0 : item.readCount }}阅读</span>
                </div>
                <div class="article-preview-info-right">
                  <div class="">
                    <span class="taro-text theme-tag">#{{ item.type }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>

    <div class="wait" v-show="selected2 == '1'" v-infinite-scroll="loadMore1" infinite-scroll-disabled="busy1" infinite-scroll-distance="10">
      <mt-spinner v-if="!end1" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
      <font v-if="end1">我是有底线的—————————————————</font>
    </div>
    <div class="wait" v-show="selected2 == '2'" v-infinite-scroll="loadMore2" infinite-scroll-disabled="busy2" infinite-scroll-distance="10">
      <mt-spinner v-if="!end2" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
      <font v-if="end2">我是有底线的—————————————————</font>
    </div>
    <div class="wait" v-show="selected2 == '3'" v-infinite-scroll="loadMore3" infinite-scroll-disabled="busy3" infinite-scroll-distance="10">
      <mt-spinner v-if="!end3" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
      <font v-if="end3">我是有底线的—————————————————</font>
    </div>
    <div class="wait" v-show="selected2 == '4'" v-infinite-scroll="loadMore4" infinite-scroll-disabled="busy4" infinite-scroll-distance="10">
      <mt-spinner v-if="!end4" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
      <font v-if="end4">我是有底线的—————————————————</font>
    </div>
    <div class="wait" v-show="selected2 == '5'" v-infinite-scroll="loadMore5" infinite-scroll-disabled="busy5" infinite-scroll-distance="10">
      <mt-spinner v-if="!end5" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
      <font v-if="end5">我是有底线的—————————————————</font>
    </div>
    <div class="wait" v-show="selected2 == '6'" v-infinite-scroll="loadMore6" infinite-scroll-disabled="busy6" infinite-scroll-distance="10">
      <mt-spinner v-if="!end6" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
      <font v-if="end6">我是有底线的—————————————————</font>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import { Indicator } from 'mint-ui';
export default {
  name: 'Home',
  data() {
    return {
      user: {
        name: '',
        id: '',
        openid: '',
        birthday: '',
        headImageUrl: '',
        subscribe: '',
        createTime: '',
        sex: '',
        email: '',
        phone: '',
        province: '',
        city: '',
        country: '',
        subscribeTime: ''
      },
      news1: [],
      news2: [],
      news3: [],
      news4: [],
      news5: [],
      news6: [],
      selected: '',
      openid: '',
      busy1: true,
      busy2: true,
      busy3: true,
      busy4: true,
      busy5: true,
      busy6: true,
      end1: false,
      end2: false,
      end3: false,
      end4: false,
      end5: false,
      end6: false,
      page1: 1,
      page2: 1,
      page3: 1,
      page4: 1,
      page5: 1,
      page6: 1,
      code: '',
      selected2: '1'
    };
  },
  created() {
    if (localStorage.getItem('openId') == null) {
      // 如果缓存localStorage中没有微信openId，则需用code去后台获取
      console.log('获取localStorage失败，准备获取code');
      this.getCode();
    } else {
      if (this.openid === '') {
        // this.openid = this.util.getLocalStorage('openid');
        this.openid = localStorage.getItem('openId');
      }
      if (localStorage.getItem('nickname') == null) {
        var that = this;
        $.ajax({
          url: 'https://yokapp.mynatapp.cc/user/getName',
          type: 'GET',
          async: false,
          data: { openid: that.openid },
          success: function(data) {
            console.log('getInfo成功' + data);
            localStorage.setItem('nickname', data.name);
            localStorage.setItem('headImgUrl', data.headImageUrl);
          },
          error: function(xhr, textStatus) {
            console.log('getInfo失败' + textStatus);
          }
        });
      }
    }
    console.log('getLocalStorage');
    this.searchInfo(false, this.page1, this.selected2);
  },
  methods: {
    getArticle: function(aid) {
      var that = this;
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.$axios.get('article/getArticle',{
        params: { articleId: aid, userArticleId: '', openid: that.openid }
      })
      .then(res => {
        // console.log(res.data);
        Indicator.close();
        that.$router.push({
          path: '/articleDetail',
          query: { articleId: res.data.article.id, userArticleId: res.data.userArticleId, oldId: res.data.userArticleId, article: res.data.article }
        });
      })
      .catch(err => {
        console.log(err);
      });
      setTimeout(() => {
       Indicator.close()
       }, 7000)
    },

    getCode: function() {
      // 非静默授权，第一次有弹框
      this.code = '';
      var local = window.location.href; // 获取页面url
      var appid = 'wxe68aaf0c3fe0e629';
      this.code = this.getUrlCode().code; // 截取code
      console.log('截取code' + this.code);
      if (this.code == null || this.code === '') {
        // 如果没有code，则去请求
        window.location.href =
          'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
          appid +
          '&redirect_uri=' +
          encodeURIComponent(local) +
          '&response_type=code&scope=snsapi_userinfo#wechat_redirect';
      } else {
        var that = this;
        $.ajax({
          url: 'https://yokapp.mynatapp.cc/wechat/getInfo',
          type: 'GET',
          async: false,
          data: { code: that.code },
          success: function(data) {
            console.log('getInfo成功' + data);
            localStorage.setItem('openId', data.openId);
            localStorage.setItem('nickname', data.nickname);
            localStorage.setItem('headImgUrl', data.headImgUrl);
            window.location.href = 'https://yok.mynatapp.cc'
            // that.openid = data.openId;
            // console.log('设置localStorage成功');
          },
          error: function(xhr, textStatus) {
            console.log('getInfo失败' + textStatus);
          }
        });
      }
    },
    getUrlCode: function() {
      // 截取url中的code方法
      var url = location.search;
      this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf('?') != -1) {
        var str = url.substr(1);
        var strs = str.split('&');
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
        }
      }
      return theRequest;
    },
    select: function() {
      if (this.selected2 == '1') {
        this.busy2 = true;
        this.busy3 = true;
        this.busy4 = true;
        this.busy5 = true;
        this.busy6 = true;
        
        this.searchInfo(true, this.page1, this.selected2);
      } else if (this.selected2 == '2') {
        this.busy1 = true;
        this.busy3 = true;
        this.busy4 = true;
        this.busy5 = true;
        this.busy6 = true;
        this.searchInfo(true, this.page2, this.selected2);
      } else if (this.selected2 == '3') {
        this.busy2 = true;
        this.busy1 = true;
        this.busy4 = true;
        this.busy5 = true;
        this.busy6 = true;
        this.searchInfo(true, this.page3, this.selected2);
      } else if (this.selected2 == '4') {
        this.busy2 = true;
        this.busy3 = true;
        this.busy1 = true;
        this.busy5 = true;
        this.busy6 = true;
        this.searchInfo(true, this.page4, this.selected2);
      } else if (this.selected2 == '5') {
        this.busy2 = true;
        this.busy3 = true;
        this.busy4 = true;
        this.busy1 = true;
        this.busy6 = true;
        this.searchInfo(true, this.page5, this.selected2);
      } else if (this.selected2 == '6') {
        this.busy2 = true;
        this.busy3 = true;
        this.busy4 = true;
        this.busy5 = true;
        this.busy1 = true;
        this.searchInfo(true, this.page6, this.selected2);
      }
    },
    searchInfo(flag, page, selected2) {
      var that = this;
      $.ajax({
        url: 'https://yokapp.mynatapp.cc/article/getNews',
        type: 'GET',
        async: false,
        data: { openid: that.openid, page: page, selected2: selected2 },
        success: function(data) {
          if (flag) {
            if (selected2 == '1') {
              console.log("select2:" + selected2)
              that.page1++; // 增加页数
              for (let j = 0; j < data.length; j++) {
                that.news1.push(data[j]);
              }
              if (data != false) {
                //还有数据
                that.busy1 = false;
                console.log('还有数据，开启busy');
              } else {
                that.busy1 = true; // 将无限滚动关闭
                that.end1 = true;
                console.log('没有数据，关闭busy');
              }
            } else if (selected2 == '2') {
              console.log("select2:" + selected2)
              that.page2++; // 增加页数
              for (let j = 0; j < data.length; j++) {
                that.news2.push(data[j]);
              }
              if (data != false) {
                //还有数据
                that.busy2 = false;
                console.log('还有数据，开启busy');
              } else {
                that.busy2 = true; // 将无限滚动关闭
                that.end2 = true;
                console.log('没有数据，关闭busy');
              }
            } else if (selected2 == '3') {
              console.log("select2:" + selected2)
              that.page3++; // 增加页数
              for (let j = 0; j < data.length; j++) {
                that.news3.push(data[j]);
              }
              if (data != false) {
                //还有数据
                that.busy3 = false;
                console.log('还有数据，开启busy');
              } else {
                that.busy3 = true; // 将无限滚动关闭
                that.end3 = true;
                console.log('没有数据，关闭busy');
              }
            } else if (selected2 == '4') {
              console.log("select2:" + selected2)
              that.page4++; // 增加页数
              for (let j = 0; j < data.length; j++) {
                that.news4.push(data[j]);
              }
              if (data != false) {
                //还有数据
                that.busy4 = false;
                console.log('还有数据，开启busy');
              } else {
                that.busy4 = true; // 将无限滚动关闭
                that.end4 = true;
                console.log('没有数据，关闭busy');
              }
            } else if (selected2 == '5') {
              console.log("select2:" + selected2)
              that.page5++; // 增加页数
              for (let j = 0; j < data.length; j++) {
                that.news5.push(data[j]);
              }
              if (data != false) {
                //还有数据
                that.busy5 = false;
                console.log('还有数据，开启busy');
              } else {
                that.busy5 = true; // 将无限滚动关闭
                that.end5 = true;
                console.log('没有数据，关闭busy');
              }
            } else if (selected2 == '6') {
              console.log("select2:" + selected2)
              that.page6++; // 增加页数
              for (let j = 0; j < data.length; j++) {
                that.news6.push(data[j]);
              }
              if (data != false) {
                //还有数据
                that.busy6 = false;
                console.log('还有数据，开启busy');
              } else {
                that.busy6 = true; // 将无限滚动关闭
                that.end6 = true;
                console.log('没有数据，关闭busy');
              }
            }
          } else {
            that.news1 = data;
            that.busy1 = false;
            that.page1++;
          }
        },
        error: function(xhr, textStatus) {
          console.log('getInfo失败' + textStatus);
        }
      });
    },
    loadMore1: function() {
      this.busy1 = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.searchInfo(true, this.page1, '1');
      }, 500);
    },
    loadMore2: function() {
      this.busy2 = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.searchInfo(true, this.page2, '2');
      }, 500);
    },
    loadMore3: function() {
      this.busy3 = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.searchInfo(true, this.page3, '3');
      }, 500);
    },
    loadMore4: function() {
      this.busy4 = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.searchInfo(true, this.page4, '4');
      }, 500);
    },
    loadMore5: function() {
      this.busy5 = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.searchInfo(true, this.page5, '5');
      }, 500);
    },
    loadMore6: function() {
      this.busy6 = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.searchInfo(true, this.page6, '6');
      }, 500);
    }
  }
};
</script>

<style scoped>
.wait {
  color: #2c3e50;
  font-size: 20px;
  margin-inline: 20px;
  margin-top: 10px;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}
div {
  display: block;
}
body,
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
body {
  width: 100%;
  max-width: 7.5rem;
  margin: 0 auto;
  overflow-x: hidden;
  font-family: -apple-system-font, PingFang SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  font-size: 0.24rem;
  line-height: 1 !important;
  color: #333;
  background-color: #fff !important;
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

.top {
  margin-bottom: 55px;
}

.content-item {
  position: relative;
  margin: 0 5px;
}

.article-preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  background: #fff;
  border-bottom: 1px solid hsla(0, 0%, 92.9%, 0.5);
}

.article-preview-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 5px;
}

.article-preview-title {
  display: -webkit-box;
  height: 16px;
  /* overflow: hidden; */
  font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;
  font-size: 16px;
  font-weight: 400;
  /* line-height: 0.48rem; */
  color: #333;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-preview-info {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.article-preview-info-left,
.article-preview-info-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.article-preview-info-left {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.article-preview-avatar {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  border-radius: 6px;
  width: 130px;
  height: 70px;
}

.article-preview-repost {
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 13px;
  font-weight: 400;
  color: #999;
}
.taro-text {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.theme-tag {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 6px;
  padding-left: 3px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 13px;
  font-weight: 400;
  line-height: 6px;
  color: #ff8232;
}
</style>
